<template>
  <div class="app-container">
    <div class="textCenter">
      <!-- 帮助引导 -->
      <guidance class="stepBtn" title="帮助引导" :list="helpList" />

      <div id="tableBoxStep5" class="tableBox">
        <el-form
          ref="tableBoxStep5"
          :model="securityConfs"
          :rules="rules"
          size="medium"
          label-width="110px"
          @submit.native.prevent
        >
          <el-form-item label="开启系统监控" style="text-align: left;">
            <el-switch
              v-model="securityConfs.isOpen"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item v-show="useDiskType==1" label="磁盘限制" prop="useDisk">
                <el-radio v-model="useDiskType" label="1" :disabled="!securityConfs.isOpen">百分比</el-radio>
                <el-radio v-model="useDiskType" label="2" :disabled="!securityConfs.isOpen">使用量</el-radio>
                <el-input v-model="securityConfs.useDisk" placeholder="请输入磁盘限制" :disabled="!securityConfs.isOpen">
                  <el-button slot="append">%</el-button>
                </el-input>
              </el-form-item>

              <el-form-item v-show="useDiskType==2" label="磁盘限制" prop="useDiskSize">
                <el-radio v-model="useDiskType" label="1" :disabled="!securityConfs.isOpen">百分比</el-radio>
                <el-radio v-model="useDiskType" label="2" :disabled="!securityConfs.isOpen">使用量</el-radio>
                <el-input v-model="securityConfs.useDiskSize" placeholder="请输入磁盘限制" :disabled="!securityConfs.isOpen">
                  <el-button slot="append">M</el-button>
                </el-input>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="CPU限制" prop="useCpu" style="width: 420px;margin-top: 38px;">
                <el-input-number
                  v-model="securityConfs.useCpu"
                  class="number"
                  placeholder="请输入CPU限制"
                  controls-position="right"
                  :min="10"
                  :max="100"
                  :step="1"
                  clearable
                  :disabled="!securityConfs.isOpen"
                />
                <span>%</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item v-show="useMemType==1" label="内存限制" prop="useMem">
                <el-radio v-model="useMemType" label="1" :disabled="!securityConfs.isOpen">百分比</el-radio>
                <el-radio v-model="useMemType" label="2" :disabled="!securityConfs.isOpen">使用量</el-radio>
                <el-input v-model="securityConfs.useMem" placeholder="请输入磁盘限制" :disabled="!securityConfs.isOpen">
                  <el-button slot="append">%</el-button>
                </el-input>

              </el-form-item>

              <el-form-item v-show="useMemType==2" label="内存限制" prop="useMemSize">
                <el-radio v-model="useMemType" label="1" :disabled="!securityConfs.isOpen">百分比</el-radio>
                <el-radio v-model="useMemType" label="2" :disabled="!securityConfs.isOpen">使用量</el-radio>

                <el-input v-model="securityConfs.useMemSize" placeholder="请输入磁盘限制" :disabled="!securityConfs.isOpen">
                  <el-button slot="append">M</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="间隔频率" class="textLeft" style="width: 420px;margin-top: 38px;">
                <el-select v-model="securityConfs.intervals" placeholder="请选择切换间隔时间" :disabled="!securityConfs.isOpen">
                  <el-option v-for="dict in checkintervalsOptions" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
                </el-select>
                分钟
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <hr style="border-top: 1px solid #f4f4f4;">
        <el-form
          ref="tableBoxStep5"
          :model="securitySystemTrend"
          :rules="rulesTrend"
          size="medium"
          label-width="110px"
        >
          <el-form-item label="开启健康监测" style="text-align: left;">
            <el-switch
              v-model="securitySystemTrend.isOpen"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="磁盘情况" prop="diskUsed">
                <el-input-number
                  v-model="securitySystemTrend.diskUsed"
                  class="number"
                  placeholder="请输入磁盘使用空间增长情况"
                  controls-position="right"
                  :min="10"
                  :max="100"
                  :step="1"
                  clearable
                  :disabled="!securitySystemTrend.isOpen"
                />
                <span>%</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="进程情况" prop="processNum">
                <el-input-number
                  v-model="securitySystemTrend.processNum"
                  class="number"
                  placeholder="请输入进程数量变化情况"
                  controls-position="right"
                  :min="10"
                  :max="100"
                  :step="1"
                  clearable
                  :disabled="!securitySystemTrend.isOpen"
                />
                <span>%</span>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="网络情况" prop="networkNum">
                <el-input-number
                  v-model="securitySystemTrend.networkNum"
                  class="number"
                  placeholder="请输入网络连接数变化情况"
                  controls-position="right"
                  :min="10"
                  :max="100"
                  :step="1"
                  clearable
                  :disabled="!securitySystemTrend.isOpen"
                />
                <span>%</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="间隔频率" class="textLeft" style="width: 420px;">
                <el-select v-model="securitySystemTrend.intervals" placeholder="请选择切换间隔频率" :disabled="!securitySystemTrend.isOpen">
                  <el-option v-for="dict in checkintervalsOptions" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
                </el-select>
                分钟
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
    </div>
    <div class="textCenter">
      <el-button size="small" type="primary" plain @click="backPage">上一步</el-button>
      <el-button size="small" type="primary" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
import {
  groupAdd,
  catalogueEdit
} from '@/api/console/group'

import flowChart from '@/views/components/flowChart/flowChart'
export default {
  components: {
    flowChart
  },
  props: {
    formDatas: Object
  },
  data() {
    var useDiskRules = (rule, value, callback) => {
      if (this.useDiskType == '1') {
        var reg = new RegExp('^(\\d|[1-9]\\d|100)$')
        if (!reg.test(value) || value < 1) {
						 callback(new Error('请输入1-100的整数！'))
        }
      } else {
        var reg = /^[1-9]\d*$/
        if (!reg.test(value)) {
          callback(new Error('请输入正整数！'))
        }
      }
    }
    var useMemRules = (rule, value, callback) => {
      if (this.useMemType == '1') {
        var reg = new RegExp('^(\\d|[1-9]\\d|100)$')
        if (!reg.test(value) || value < 1) {
          callback(new Error('请输入1-100的整数！'))
        }
      } else {
        var reg = /^[1-9]\d*$/
        if (!reg.test(value)) {
          callback(new Error('请输入正整数！'))
        }
      }
    }

    return {
      helpList: [
        {
          'title': '预警监控页面指引',
          'helpMsg': '预警监控页面指引'
        }
      ],
      useDiskType: '1',
      useMemType: '1',
      securityConfs: {
        isOpen: 0,
        useDisk: 80,
        useDiskSize: '',
        useMem: 80,
        useMemSize: '',
        useCpu: 80,
        intervals: '1'
      },
      securitySystemTrend: {
					 isOpen: 0, /** 是否开启预警监控*/
					 diskUsed: 80, /** 磁盘已使用阈值  百分比 */
					 processNum: 50, /** 进程数阈值 百分比*/
					 networkNum: 80, /** 网络连接数阈值 百分比*/
					 intervals: '1'/** 间隔频率，单位：分钟*/
      },
      // 心跳间隔
      checkintervalsOptions: [],
      rules: {
        useDisk: [{
          required: true,
          message: '请填写 镜像存储目录',
          trigger: 'blur'
        },
        { validator: useDiskRules, trigger: 'change' }
        ],
        useDiskSize: [{
          required: true,
          message: '请填写 镜像存储目录',
          trigger: 'blur'
        },
        { validator: useDiskRules, trigger: 'change' }
        ],
        useCpu: [{
          required: true,
          message: '请填写 CPU限制',
          trigger: 'blur'
        }],
        useMem: [{
          required: true,
          message: '请填写 内存限制',
          trigger: 'blur'
        },
        { validator: useMemRules, trigger: 'change' }],
        useMemSize: [{
          required: true,
          message: '请填写 内存限制',
          trigger: 'blur'
        }
        ]
      },
      rulesTrend: {
        diskUsed: [{
          required: true,
          message: '请填写 磁盘已使用阈值',
          trigger: 'blur'
        },
        { validator: useMemRules, trigger: 'change' }],
        processNum: [{
          required: true,
          message: '请填写 进程数阈值',
          trigger: 'blur'
        },
        { validator: useMemRules, trigger: 'change' }],
        networkNum: [{
          required: true,
          message: '请填写 网络连接数阈值',
          trigger: 'blur'
        },
        { validator: useMemRules, trigger: 'change' }
        ]
      }
    }
  },
  watch: {

  },
  created() {
    if (this.formDatas.id) {
      // 预警回填
      this.securityConfs.id = this.formDatas.securityConfs.id
      this.securityConfs.isOpen = this.formDatas.securityConfs.isOpen
      this.securityConfs.useDisk = this.formDatas.securityConfs.useDisk
      this.securityConfs.useMem = this.formDatas.securityConfs.useMem
      this.securityConfs.useCpu = this.formDatas.securityConfs.useCpu
      this.securityConfs.intervals = this.formDatas.securityConfs.intervals

      // 监测回填

      if (this.formDatas.securitySystemTrend) {
        this.securitySystemTrend.id = this.formDatas.securitySystemTrend.id
        this.securitySystemTrend.isOpen = this.formDatas.securitySystemTrend.isOpen
        this.securitySystemTrend.diskUsed = this.formDatas.securitySystemTrend.diskUsed
        this.securitySystemTrend.processNum = this.formDatas.securitySystemTrend.processNum
        this.securitySystemTrend.networkNum = this.formDatas.securitySystemTrend.networkNum
        this.securitySystemTrend.intervals = this.formDatas.securitySystemTrend.intervals
      }
    }

    // 心跳间隔
    this.getDicts('Interval_frequency').then(response => {
      this.checkintervalsOptions = response.data
    })
  },
  methods: {
    // 处理页面数据
    processingData() {
      var reg = new RegExp('^(\\d|[1-9]\\d|100)$')
      var reg2 = /^[1-9]\d*$/

      if (this.securityConfs.isOpen) {
        if (this.useDiskType == 1) {
          if (this.securityConfs.useDisk == '') {
            this.$message.error('请输入磁盘限制')
            return
          } else if (!reg.test(this.securityConfs.useDisk) || this.securityConfs.useDisk < 1) {
            this.$message.error('磁盘限制 请输入1-100的整数！')
            return
          } else {
            this.securityConfs.useDiskSize = ''
          }
        } else {
          if (this.securityConfs.useDiskSize == '') {
            this.$message.error('请输入磁盘限制')
            return
          } else if (!reg2.test(this.securityConfs.useDiskSize) || this.securityConfs.useDiskSize < 1) {
            this.$message.error('磁盘限制 请输入正整数！')
            return
          } else {
            this.securityConfs.useDisk = ''
          }
        }

        if (this.useMemType == 1) {
          if (this.securityConfs.useMem == '') {
            this.$message.error('请输入内存限制')
            return
          } else if (!reg.test(this.securityConfs.useMem) || this.securityConfs.useMem < 1) {
            this.$message.error('内存限制 请输入1-100的整数！')
            return
          } else {
            this.securityConfs.useMemSize = ''
          }
        } else {
          if (this.securityConfs.useMemSize == '') {
            this.$message.error('请输入内存限制')
            return
          } else if (!reg2.test(this.securityConfs.useMemSize) || this.securityConfs.useMemSize < 1) {
            this.$message.error('内存限制 请输入正整数！')
            return
          } else {
            this.securityConfs.useMem = ''
          }
        }
      }

      if (this.securitySystemTrend.isOpen) {
        if (!this.securitySystemTrend.diskUsed || !this.securitySystemTrend.processNum || !this.securitySystemTrend.networkNum) {
          return false
        }
      }

      return true
    },
    // 上一步
    backPage() {
      this.$emit('changeActive', 3)
    },
    // 下一步
    next() {
      if (this.processingData()) {
        this.$emit('changeActive', 5, this.securityConfs, this.securitySystemTrend)
        return true
      }
    }

  }
}
</script>

<style>
	#tableBoxStep5 .el-form-item__content{
		text-align: left;

	}
</style>

<style lang="scss" scoped>
.tableBox {
  width: 800px;
  margin: 0 auto;
}

.number{
	width:224px;
	margin-right: 10px;
}
</style>
